<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta blitz-debugger="localhost">
    <meta name="viewport" content="width=1920">
    <title>index</title>
    <link rel="stylesheet" href="./css/base.css"/>
    <!--<link rel="stylesheet" href="../VideoPlayer/video_controls.css"/>-->
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        :after, :before {
            box-sizing: border-box;
        }

        .item {
            float: left;
            width: 200px;
            height: 80px;
            line-height: 80px;
            font-size: 28px;
            text-align: center;
            color: #000000;
            border: solid 1px #00ff00;
            background-color: #009999;
        }

        .item.fe-focus {
            background-color: #0099ff;
        }

        .scroll {
            width: 840px;
            height: 500px;
            position: absolute;
            margin-top: 480px;
            margin-left: 200px;
            overflow: hidden;
            border: solid 1px #FFFFFF;
        }

        #video_palyer_wraper {
            background-color: #00ff00;
            position: absolute;
            margin-top: 40px;
            margin-left: 200px;
            width: 800px;
            height: 400px
        }

        .pause{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body fe-role="Switch" style="width: 1920px; height: 1280px; background-color: #1c1f2b">
    <div id="scroll" class="scroll" fe-role="Switch">
        <div class="item" id="video_palyer_wraper1" fe-role="Widget">src1</div>
        <div class="item" id="video_palyer_wraper2" fe-role="Widget">src2</div>
        <div class="item" id="video_palyer_wraper3" fe-role="Widget">列表播放</div>
        <div class="item" id="video_palyer_wraper4" fe-role="Widget">全屏播放</div>
        <div class="item" id="video_palyer_wraper5" fe-role="Widget">play</div>
        <div class="item" id="video_palyer_wraper6" fe-role="Widget">pause</div>
        <div class="item" id="video_palyer_wraper7" fe-role="Widget">hide</div>
        <div class="item" id="video_palyer_wraper8" fe-role="Widget">show</div>
        <div class="item" id="video_palyer_wraper9" fe-role="Widget">换Pause图标</div>
        <div class="item" id="video_palyer_wraper10" fe-role="Widget">showError</div>
        <div class="item" id="video_palyer_wraper11" fe-role="Widget">假地址测试</div>
    </div>
    <div class="item1" id="video_palyer_wraper" fe-role="Widget"></div>

    <script src="js/LogUtil.js"></script>
    <script src="testData/playList.js"></script>
    <script src="../../../FocusEngine.js"></script>
    <script src="js/VideoPlayer.js"></script>
    <!--<script src="../VideoPlayer/VideoList.js"></script>-->
    <!--<script src="../VideoPlayer/CircleLoading.js"></script>-->
    <!--<script src="../VideoPlayer/VideoPlayerControl.js"></script>-->
    <!--<script src="../VideoPlayer/VideoPlayer.js"></script>-->

    <script>
    var src = "http://ips.ifeng.com/video19.ifeng.com/video09/2017/03/02/4537093-102-078-1152.mp4";
    var src1 = "http://ask.ivideo.sina.com.cn/v_play_ipad.php?vid=129992839&tags=newsList_web&time=1489140059617&rd=0.8860258791975397";
    var src2 = "http://4215.vod.myqcloud.com/4215_8a72fffc2a9511e5b5c33b30821477a3.f30.mp4?sign=428da0467d959f5b8980bc4d57e6fb27&t=87654321";
    var playList = window.PlayList;
    var root = FocusEngine.render();
    window.onload = function () {

        var node = document.getElementById("video_palyer_wraper");
        window.video = new VideoPlayer({
            isFullScreen: false, //是否全屏播放,默认true(全屏),
            root: node,  //视频组件的父控件，默认body,这个控件需要设置成absolute，否则小窗显示会不正确
            isAutoPlay: true, //是否自动播放，默认true（自动播放）,全屏状态下这个值失效
            preventDefaultKeyEvent:false //全屏播放返回后是否禁用系统back事件，默认false（不禁用），一般在单页面开发的非首页scene传递true
        });
        window.video.setDataSrc({
            url:src,
            name:'测试视频'
        });
        root.on("keyup", function (e) {
            if (e.keyCode == 13) {
                var id = e.target.id;
                Log(' on item click id = ' + id);
                if (e.target.id == "video_palyer_wraper" || id == "video_palyer_wraper4") {
                    console.log("wanghuanlai keyup");
                    //小窗转全屏播放
                    window.video.playInFullScreen();
                } else if (id == "video_palyer_wraper1") {
                    window.video.setDataSrc({
                        url:src1,
                        name:'测试视频1'
                    });
                } else if (id == "video_palyer_wraper2") {
                    window.video.setDataSrc({
                        url:src2,
                        name:'测试视频2'
                    });
                } else if (id == "video_palyer_wraper3") {
                    window.video.setListItemRender(function(dom, item){
                        if (item) {
                            var detail = window.video.playList[window.video.currentIndex];
                            if(detail && detail.episodeId == item.episodeId){
                                dom.style.background = '#6fa8dc';
                            } else {
                                dom.style.background = 'transparent';
                            }
                            dom.getElementsByTagName('img')[0].src = item.imgUrl;
                            dom.getElementsByTagName('p')[0].textContent = item.title;
                        }
                    });
                    //这个data是传递的setPlayList传递的对应数据
                    window.video.setOnItemClickListener(function(data){
                        Log(" setOnItemClickListener run data.episodeId === " + data.episodeId);
                        // 先进入加载，免得用户点击有延迟反应的感觉
                        window.video.setDataSrc(null);
                        // 模拟请求影片详情，如果提前知道url的视频，可以直接传递给playList
                        // 不设置这个方法会调用setDataSrc直接播放
                        setTimeout(function(){
                            window.video.setDataSrc({
                                url: src,
                                name: '测试ID是' + data.episodeId
                            });
                        }, 2000);
                    });
                    window.video.setPlayList(playList);
                    //这个方法设置得当可以直接这样播放
                    window.video.onItemClickListener(playList[0]);
                } else if (id == "video_palyer_wraper5") {
                    window.video.play();
                } else if (id == "video_palyer_wraper6") {
                    window.video.pause();
                } else if (id == "video_palyer_wraper7") {
                    window.video.hide();
                } else if (id == "video_palyer_wraper8") {
                    window.video.show();
                } else if (id == "video_palyer_wraper9") {
                    var pauseDom = "<img class=\"pause\" src=\"./pause.png\"/>";
                    window.video.updatePauseView(pauseDom);
                } else if (id == "video_palyer_wraper10") {
                    window.video.showError('播放请求错误，无法播放');
                } else if (id == "video_palyer_wraper11") {
                    window.video.setDataSrc({
                        url:"http://www.testerror.com/ddddd.mp4",
                        name:"假地址测试"
                    });
                }
            }
        });
    }
</script>
</body>
</html>
